<!--父级页面:控制除了登录页以外所有页面共有的头部与左侧菜单栏-->
<template>
  <div style="display: flex;">
    <div :style="{width:(isCollapse ? '64px' : '208px')}">
      <el-menu
          background-color="#586374"
          text-color="#fff"
          active-text-color="#ff0"
          style="width:100%;height:100vh;"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          @select="selectMenu"
      >
        <el-row style="padding-top: 8px;">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px;">
            <el-avatar src="/imgs/admin/google-g-logo.svg" style="width: 35px;height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse ? 0 : 13">
            <router-link to="/"
                         style="text-decoration:none;color:#ffffff;font-weight:bold;position:relative;top:8px;left:2px;">
              企业管理
            </router-link>
          </el-col>
        </el-row>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px;">
              <Wallet/>
            </el-icon>
            <span>权限组</span>
          </template>
          <el-menu-item index="/role">权限组列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px;">
              <User/>
            </el-icon>
            <span>管理员</span>
          </template>
          <el-menu-item index="/manager">管理员列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px;">
              <Location/>
            </el-icon>
            <span>员工档案</span>
          </template>
          <el-menu-item index="/">员工列表</el-menu-item>
          <el-menu-item index="/salary">薪资查询</el-menu-item>
          <el-menu-item index="/salary/files">薪资档案</el-menu-item>
          <el-menu-item index="/salary/add">每月工资录入</el-menu-item>


        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px;">
              <Calendar/>
            </el-icon>
            <span>考勤管理</span>
          </template>
          <el-menu-item index="/attendance">员工考勤</el-menu-item>
          <el-menu-item index="/attendanceApplication">请假申请</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size: 21px;">
              <Notebook/>
            </el-icon>
            <span>学习平台</span>
          </template>
          <el-menu-item index="/study/file">文章资料</el-menu-item>
          <el-menu-item index="/study/video">视频资料</el-menu-item>
          <el-menu-item index="/study/category">资料分类</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon style="font-size: 21px;">
              <ChatDotRound/>
            </el-icon>
            <span>公告管理</span>
          </template>
          <el-menu-item index="/notice">通知列表</el-menu-item>
          <el-menu-item index="/noticeDrafts">草稿箱</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>
            <el-icon style="font-size: 21px;">
              <Stamp/>
            </el-icon>
            <span>资产管理</span>
          </template>
          <el-menu-item index="/application">领用申请</el-menu-item>
          <el-menu-item index="/management">资产管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="8">
          <template #title>
            <el-icon style="font-size: 21px;">
              <Flag/>
            </el-icon>
            <span>操作日志</span>
          </template>
          <el-menu-item index="/operationLog">操作日志</el-menu-item>
          <el-menu-item index="/logrecord">登录记录</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="9">
          <template #title>
            <el-icon style="font-size: 21px;">
              <OfficeBuilding/>
            </el-icon>
            <span>部门管理</span>
          </template>
          <el-menu-item index="/department">概览</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="10">
          <template #title>
            <el-icon style="font-size: 21px;">
              <OfficeBuilding/>
            </el-icon>
            <span>审批管理</span>
          </template>
          <el-menu-item index="/workAudit">请假审批</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!-- 右侧主体内容 -->
    <div :style="{width:(isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)')}">
      <!-- 右侧顶部条:折叠按钮+用户名 -->
      <el-header style="padding-top:22px;height:10vh;background-color:#fff;">
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon style="font-size:20px;" @click="changeCollapse">
              <Expand/>
            </el-icon>
          </el-col>
          <el-col :span="6" style="position: relative;">
            <el-dropdown trigger="click" style="position: absolute;right: 20px;">
              <span style="font-size: 19px;font-weight: bold;">
<!--                {{user.username}}-->
                admin
                <el-icon><arrow-down/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="position:relative;top:10px;">
          <el-breadcrumb-item style="font-size: 16px;">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb" style="font-size: 16px;">
            {{item}}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <!-- 右侧主体内容:除顶部条与面包屑之外的可变区域,具体的部分在子页面中写! -->
      <el-main style="height: 90vh;padding: 0;overflow-y:auto;">
        <router-view/>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ArrowDown} from "@element-plus/icons-vue";

//定义变量控制菜单栏是否折叠
const isCollapse = ref(false);

//修改左侧菜单折叠状态
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
}

//获取当前登录的用户对象
const user = ref(getUser());

//定义数组用来保存面包屑导航显示的值
// const breadcrumb = ref(JSON.parse(localStorage.getItem('breadCrumb')) || ['用户管理', '用户列表']);
//维护面包屑导航与菜单项index的对应关系
let map = {
  "/study": ['培训','列表'],
  "/application": ['资产管理','申请列表'],
  "/management": ['资产管理','资产管理'],
  "/role": ['权限组', '列表'],
  "/manager": ['管理员', '列表'],
  "/department": ['部门', '概览'],
  "/attendance": ['考勤管理', '员工考勤'],
  "/attendanceApplication": ['考勤管理', '请假申请'],
  "/home": ['首页', ''],
  "/department": ['部门', '概览'],
}
//只要选择菜单项,就切换面包屑的值
const selectMenu = (index)=>{
  console.log('菜单项被点击了!'+index);
  // breadcrumb.value = map[index];
//   解决每次刷新时,面包屑都会切换回'用户管理','用户列表'的问题
//   将面包屑的值保存到localStorage中,一旦刷新,就走上面的
//   localStorage.setItem('breadcrumb', JSON.stringify(breadcrumb.value));
}
const logout = () => {
  if (confirm('确定退出登录吗?')) {
    // 退出时要清空用户与面包屑数据
    localStorage.removeItem('user');
    // localStorage.removeItem('breadcrumb');
    //这里就将token从localStorage中删除,确保下次登录时,token失效
    // localStorage.removeItem('token');
    //退出后跳转到登录页面
    location.href = '/login';
    user.value = '';
  }
}

</script>
